<template>
  <div class="mapTemplet">
    <mapBack ref="child" :list='this.list'></mapBack>
    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index" @click="mapClick(item)">
          <div class="flexStart">
            <div class="left" style="position:relative">
              <img width="120px" height="88px" :src="item.img_content" alt />
              <div style="position:absolute;left:0;top:0">
                <img :src="item.img_logo" alt width="44" height="42" />
              </div>
            </div>
            <div class="right flexDirectionCenter">
              <div class="flexStart1">
                <div class="flag" v-if="item.flag=='新建'">{{item.flag}}</div>
                <div class="flag2" v-if="item.flag=='局监管'">{{item.flag}}</div>
                <div class="flag3" v-if="item.flag=='局直管'">{{item.flag}}</div>
                <div class="title">{{item.title}}</div>
              </div>
              <div class="detail">{{item.detail}}</div>
              <div class="price">{{item.price}}</div>
            </div>
          </div>
          <div class="viewPro" @click.stop="projectDetails(item)">查看项目</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map'
import { queryAll } from '@/api/gateway'
import mapBack from './map/index'
// import img_content1 from "../../../assets/projectDetail.jpg";
import img_logo1 from '../../../assets/homeImg/jujianguan.png'
import jiangyin from '../../../assets/homeImg/jiangyin.jpg'
import img_logo2 from '../../../assets/homeImg/zaijian.png'
import longtan from '../../../assets/homeImg/longtan.jpg'
import img_logo3 from '../../../assets/homeImg/juzhiguan.png'
import xinyi from '../../../assets/homeImg/xinyi.jpg'
import nanbu from '../../../assets/projectDetail.jpg'
import changtai from '../../../assets/homeImg/changtai.jpg'
import chuzhou from '../../../assets/homeImg/chuzhou.jpg'
import wufengshan from '../../../assets/homeImg/wutaifeng.png'
const list = [
  {
    lat: 34.424034,
    lng: 118.395956,
    showFlag: false,
    img_content: chuzhou,
    img_logo: img_logo3,
    flag: '新建',
    title: '京沪淮江段扩建工程',
    detail: '京沪高速公路淮安至江都段工程',
    price: '199.1亿元/152.7公里/3.5年'
  },
  {
    lat: 34.420341,
    lng: 118.40228,
    showFlag: false,
    img_content: nanbu,
    img_logo: img_logo3,
    flag: '新建',
    title: '南部通道',
    detail: '苏锡高速公路常州至无锡段工程',
    price: '159.1亿元/43.9公里/4年'
  },
  {
    lat: 34.415279,
    lng: 118.410904,
    showFlag: false,
    img_content: longtan,
    img_logo: img_logo3,
    flag: '新建',
    title: '龙潭长江大桥',
    detail: '龙潭过江通道工程',
    price: '62.54亿元/4.925公里/5年'
  },
  {
    lat: 34.411705,
    lng: 118.416438,
    showFlag: false,

    img_content: changtai,
    img_logo: img_logo3,
    flag: '新建',
    title: '常泰长江大桥',
    detail: '常泰过江通道',
    price: '158.61亿元/130.7公里/5.5年'
  },
  {
    lat: 34.294223,
    lng: 118.626282,
    showFlag: false,

    img_content: jiangyin,
    img_logo: img_logo3,
    flag: '新建',
    title: '江阴靖江长江隧道',
    detail: '江阴靖江长江隧道',
    price: '89.1亿元/5.6公里/3年'
  },
  {
    lat: 33.93653,
    lng: 118.944965,
    showFlag: false,
    img_content: wufengshan,
    img_logo: img_logo3,
    flag: '新建',
    title: '五峰山过江通道',
    detail: '五峰山过江通道公路接线工程',
    price: '93.58亿元/33.04公里/3年'
  }
]
export default {
  components: {
    mapBack
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.getQueryAll()
  },
  methods: {
    projectDetails(data) {
      sessionStorage.setItem('homeFlag',true)
      
      this.$router.push({ path: '/projectDetails', query: { data: data } })
      sessionStorage.setItem('projectId',data.id)
      sessionStorage.setItem('imgdata', JSON.stringify(data))
      // console.log(JSON.parse(sessionStorage.getItem("imgdata")));
    },
    getQueryAll() {
      let data = {}
      queryAll(data).then((res) => {
        let data = res.data.data
        data.forEach((item) => {
          item.showFlag = false

          item.img_logo = img_logo3
          item.flag = '新建'
          item.title = item.briefName
          item.detail = item.fullName
          switch (item.context) {
            case 'sgms':
              item.price = '158.61亿元/130.7公里/5.5年'
              item.img_content ='https://lw-sit.oss-cn-beijing.aliyuncs.com/lw/RBvc-upload-1621479143274-10/1622109999533葛市互通.jpg'
              item.lat = 34.424034
              item.lng = 118.395956
              break
            case 'jyjj':
              item.price = '89.1亿元/5.6公里/3年'
              item.img_content = jiangyin
              break
            case 'wfs':
              item.price = '93.58亿元/33.04公里/3年'
              item.img_content = wufengshan
              break
            case 'nbtd':
              item.price = '159.1亿元/43.9公里/4年'
              item.img_content = nanbu
              break
            case 'lt':
              item.price = '62.54亿元/4.925公里/5年'
              item.img_content = longtan
              break
            case 'jhkj':
              item.price = '199.1亿元/152.7公里/3.5年'
              item.img_content = chuzhou
              break
            case 'jscc':
              item.price = '199.1亿元/152.7公里/3.5年'
              item.img_content = changtai
              
              break
            case 'hsygs':
              item.price = '62.54亿元/4.925公里/5年'
              item.img_content = longtan
             
              break
            default:
              item.price = '159.1亿元/43.9公里/4年'
              item.img_content = nanbu
               item.lat = 34.294223
              item.lng = 118.416438
              break
          }
        })
        this.list = data
        // console.log(this.list);
      })
    },
    mapClick(flag) {
      // console.log(BaiduMap);
      
      //  BaiduMap.getCenter()
      // this.$nextTick(() => {
      setTimeout(() => {
        this.$refs.child.isShow(flag)
      }, 10)
      // })
      // this.mapProps=flag
    }
  }
}
</script>

<style scoped>
.mapTemplet {
  width: 1200px;
  position: relative;
}
ul {
  margin: 0;
  padding-top: 26px;
  padding-left: 15px;
  overflow-y: scroll;
  width: 360px;
  height: 486px;
  background: #fff;

  overflow: auto;
}
ul::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
ul::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
ul::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
li {
  list-style: none;
  margin-bottom: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.left {
  width: 120px;
  height: 88px;
  margin-right: 14px;
}
.right {
  width: 182px;

  font-size: 14px;

  font-family: 'Microsoft YaHei';
  font-weight: 400;
  color: #333333;
}
.flag,
.flag2,
.flag3 {
  text-align: center;
  width: 45px;
  height: 18px;
  background: #51b342;
  border-radius: 2px;
  font-size: 12px;
  margin-right: 9px;
  color: #fff;
}
.flag2 {
  background: #ff8a00;
}
.flag3 {
  background: #074dec;
}
.title {
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Microsoft YaHei';
  font-weight: bold;
}
.detail {
  /* margin-top: 11px; */
  font-size: 14px;
  color: #333;
  /* margin-bottom: 10px; */
}
.price {
  font-size: 13px;
  color: #999;
}
.list {
  /* padding-left: 0; */
  position: absolute;
  top: 40px;
  left: 25px;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
}
.viewPro {
  width: 70px;
  height: 30px;
  border-radius: 1px;
  background: #2e85d6;
  color: white;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  position: absolute;
  right: 3px;
  top: 0px;
  /* display: none; */
  transform: translate(400px, 0px);
  transition: transform 0.35s;
}
li {
  padding-bottom: 7px;
}
li:hover .viewPro {
  transform: translate(0px, 0px);
}
li:hover {
  background: #f5f5f5;
}
</style>
